import PersonalInfo from './components/personal-info';
import SkillInfo from './components/skill-info';
import WorkInfo from './components/work-info';

import './App.less';
import { useMemo } from 'react';
import { workInfos } from './config';
import { usePdfExport } from './utils/usePdfExport';
import { useSmartPdfExport } from './utils/useSmartPdfExport';

function App() {
  const { exportToPdf, isExporting, error } = usePdfExport({
    filename: '我的简历.pdf',
    scale: 2,
    quality: 1,
  });

  const {
    exportToPdf: smartExportToPdf,
    isExporting: isSmartExporting,
    error: smartError,
  } = useSmartPdfExport({
    filename: '我的简历-智能分页.pdf',
    scale: 2,
    quality: 1,
    avoidBreakSelectors: ['.work', '.skill', '.personal'],
  });

  const WorkInfoEls = useMemo(() => {
    const els: JSX.Element[] = [];
    workInfos.forEach((item, index) => {
      els.push(<WorkInfo key={index} workInfo={item} />);
    });
    return els;
  }, []);

  const handleExportPdf = async () => {
    await exportToPdf('.resume-container');
  };

  const handleSmartExportPdf = async () => {
    await smartExportToPdf('.resume-container');
  };

  return (
    <div className="container">
      <div className="export-controls" style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={handleExportPdf}
          disabled={isExporting}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: isExporting ? 'not-allowed' : 'pointer',
            opacity: isExporting ? 0.6 : 1,
            marginRight: '10px',
          }}
        >
          {isExporting ? '导出中...' : '普通导出PDF'}
        </button>
        <button
          onClick={handleSmartExportPdf}
          disabled={isSmartExporting}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: isSmartExporting ? 'not-allowed' : 'pointer',
            opacity: isSmartExporting ? 0.6 : 1,
          }}
        >
          {isSmartExporting ? '导出中...' : '智能分页导出PDF'}
        </button>
        {error && <div style={{ color: 'red', marginTop: '10px' }}>普通导出失败: {error}</div>}
        {smartError && <div style={{ color: 'red', marginTop: '10px' }}>智能导出失败: {smartError}</div>}
      </div>
      <div className="resume-container">
        <PersonalInfo />
        <SkillInfo />
        {WorkInfoEls}
      </div>
    </div>
  );
}

export default App;
